<template>
  <div class="basic-info-tab">
    <!-- 头像区域 -->
    <a-row :gutter="24" class="avatar-section">
      <a-col :span="24">
        <a-card title="头像信息" size="small">
          <div class="avatar-container">
            <a-avatar :src="archive.avatar" :size="120">
              {{ archive.name?.charAt(0) }}
            </a-avatar>
            <div class="avatar-actions">
              <a-button type="primary" size="small" @click="handleUploadAvatar">
                <UploadOutlined />
                更换头像
              </a-button>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 基本信息 -->
    <a-row :gutter="24" class="info-section">
      <a-col :span="24">
        <a-card title="基本信息" size="small">
          <a-form ref="basicFormRef" :model="basicInfo" :rules="basicRules" layout="vertical" @finish="handleSaveBasicInfo">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="全名" name="fullName">
                  <a-input v-model:value="basicInfo.fullName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="昵称" name="nickname">
                  <a-input v-model:value="basicInfo.nickname" placeholder="可选" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="性别" name="gender">
                  <a-radio-group v-model:value="basicInfo.gender">
                    <a-radio value="male">男</a-radio>
                    <a-radio value="female">女</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="身份证号" name="idCard">
                  <a-input v-model:value="basicInfo.idCard" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="血型" name="bloodType">
                  <a-select v-model:value="basicInfo.bloodType">
                    <a-select-option value="A">A型</a-select-option>
                    <a-select-option value="B">B型</a-select-option>
                    <a-select-option value="AB">AB型</a-select-option>
                    <a-select-option value="O">O型</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="籍贯" name="birthPlace">
                  <a-input v-model:value="basicInfo.birthPlace" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="民族" name="nationality">
                  <a-input v-model:value="basicInfo.nationality" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="婚姻状况" name="maritalStatus">
                  <a-select v-model:value="basicInfo.maritalStatus">
                    <a-select-option value="未婚">未婚</a-select-option>
                    <a-select-option value="已婚">已婚</a-select-option>
                    <a-select-option value="丧偶">丧偶</a-select-option>
                    <a-select-option value="离异">离异</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-form-item label="现住址" name="currentAddress">
              <a-input v-model:value="basicInfo.currentAddress" />
            </a-form-item>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="职业" name="profession">
                  <a-select v-model:value="basicInfo.profession" placeholder="请选择职业">
                    <a-select-option value="商人">商人</a-select-option>
                    <a-select-option value="农民">农民</a-select-option>
                    <a-select-option value="学者">学者</a-select-option>
                    <a-select-option value="官员">官员</a-select-option>
                    <a-select-option value="工匠">工匠</a-select-option>
                    <a-select-option value="僧侣">僧侣</a-select-option>
                    <a-select-option value="道士">道士</a-select-option>
                    <a-select-option value="武者">武者</a-select-option>
                    <a-select-option value="艺人">艺人</a-select-option>
                    <a-select-option value="其他">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="学历" name="education">
                  <a-select v-model:value="basicInfo.education">
                    <a-select-option value="私塾">私塾</a-select-option>
                    <a-select-option value="太学">太学</a-select-option>
                    <a-select-option value="国子监">国子监</a-select-option>
                    <a-select-option value="书院">书院</a-select-option>
                    <a-select-option value="其他">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-form-item>
              <a-space>
                <a-button type="primary" html-type="submit" :loading="saving">
                  <SaveOutlined />
                  保存基础信息
                </a-button>
                <a-button @click="resetBasicInfo">
                  <ReloadOutlined />
                  重置
                </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

    <!-- 家族信息 -->
    <a-row :gutter="24" class="family-section">
      <a-col :span="24">
        <a-card title="家族族谱" size="small">
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="家族姓氏">
              {{ getFamilySurname() }}
            </a-descriptions-item>
            <a-descriptions-item label="家族辈分">
              {{ getFamilyGeneration() }}
            </a-descriptions-item>
            <a-descriptions-item label="家族堂号">
              {{ getFamilyHall() }}
            </a-descriptions-item>
          </a-descriptions>

          <div class="family-tree-container">
            <h4>直系亲属关系图</h4>
            <div class="family-tree">
              <!-- 父母 -->
              <div class="generation parents">
                <div v-for="parent in getFamilyParents()" :key="parent.name" class="family-member parent">
                  <a-avatar size="small">{{ parent.name.charAt(0) }}</a-avatar>
                  <span>{{ parent.name }}</span>
                  <a-tag :color="parent.status === 'alive' ? 'green' : 'gray'" size="small">
                    {{ parent.status === 'alive' ? '在世' : '已故' }}
                  </a-tag>
                </div>
              </div>

              <!-- 本人 -->
              <div class="generation self">
                <div class="family-member self">
                  <a-avatar :src="archive.avatar">{{ archive.name.charAt(0) }}</a-avatar>
                  <span class="name">{{ archive.name }}（本人）</span>
                  <a-tag :color="archive.status === 'alive' ? 'green' : 'red'">
                    {{ archive.status === 'alive' ? '在世' : '已故' }}
                  </a-tag>
                </div>

                <!-- 配偶 -->
                <div v-if="getFamilySpouse()" class="family-member spouse">
                  <a-avatar size="small">{{ getFamilySpouse().name.charAt(0) }}</a-avatar>
                  <span>{{ getFamilySpouse().name }}（配偶）</span>
                  <a-tag :color="getFamilySpouse().status === 'alive' ? 'green' : 'gray'" size="small">
                    {{ getFamilySpouse().status === 'alive' ? '在世' : '已故' }}
                  </a-tag>
                </div>
              </div>

              <!-- 子女 -->
              <div v-if="getFamilyChildren().length > 0" class="generation children">
                <div v-for="child in getFamilyChildren()" :key="child.name" class="family-member child">
                  <a-avatar size="small">{{ child.name.charAt(0) }}</a-avatar>
                  <span>{{ child.name }}</span>
                  <a-tag color="blue" size="small">子女</a-tag>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
import { UploadOutlined, SaveOutlined, ReloadOutlined } from '@ant-design/icons-vue'

// 组件属性
const props = defineProps({
  archive: {
    type: Object,
    required: true
  }
})

// 组件事件
const emit = defineEmits(['update'])

// 响应式数据
const basicFormRef = ref()
const saving = ref(false)

// 基础信息表单数据
const basicInfo = reactive({
  fullName: '',
  nickname: '',
  gender: 'male',
  idCard: '',
  bloodType: '',
  birthPlace: '',
  nationality: '',
  maritalStatus: '',
  currentAddress: '',
  profession: '',
  education: ''
})

// 表单验证规则
const basicRules = {
  fullName: [{ required: true, message: '请输入全名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /^\d{15}$|^\d{18}$|^\d{17}[Xx]$/, message: '身份证号格式不正确', trigger: 'blur' }
  ],
  birthPlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
  profession: [{ required: true, message: '请选择职业', trigger: 'change' }]
}

// 监听档案变化，更新表单数据
watch(
  () => props.archive,
  (newArchive) => {
    if (newArchive && newArchive.basicInfo) {
      Object.assign(basicInfo, {
        fullName: newArchive.basicInfo.fullName || newArchive.name || '',
        nickname: newArchive.basicInfo.nickname || '',
        gender: newArchive.gender || 'male',
        idCard: newArchive.basicInfo.idCard || '',
        bloodType: newArchive.basicInfo.bloodType || '',
        birthPlace: newArchive.basicInfo.birthPlace || '',
        nationality: newArchive.basicInfo.nationality || '',
        maritalStatus: newArchive.basicInfo.maritalStatus || '',
        currentAddress: newArchive.basicInfo.currentAddress || '',
        profession: newArchive.basicInfo.profession || '',
        education: newArchive.basicInfo.education || ''
      })
    }
  },
  { immediate: true }
)

// 计算属性
const getFamilySurname = () => {
  return props.archive.name ? props.archive.name.charAt(0) + '氏' : '未知'
}

const getFamilyGeneration = () => {
  const generations = ['第一代', '第二代', '第三代', '第四代', '第五代']
  return generations[Math.floor(Math.random() * generations.length)]
}

const getFamilyHall = () => {
  const surname = props.archive.name ? props.archive.name.charAt(0) : ''
  const halls = [`${surname}氏宗祠`, `${surname}门第`, `${surname}堂`]
  return halls[0]
}

const getFamilyParents = () => {
  return props.archive.socialNetwork?.family?.parents || []
}

const getFamilySpouse = () => {
  return props.archive.socialNetwork?.family?.spouse || null
}

const getFamilyChildren = () => {
  return props.archive.socialNetwork?.family?.children || []
}

// 方法
const handleUploadAvatar = () => {
  message.info('头像上传功能开发中')
}

const handleSaveBasicInfo = async () => {
  try {
    saving.value = true

    // 发送更新事件给父组件
    emit('update', basicInfo)

    message.success('基础信息保存成功')
  } catch (error) {
    message.error('保存失败：' + error.message)
  } finally {
    saving.value = false
  }
}

const resetBasicInfo = () => {
  basicFormRef.value?.resetFields()
  // 重新从档案中加载数据
  if (props.archive && props.archive.basicInfo) {
    Object.assign(basicInfo, props.archive.basicInfo)
  }
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.basic-info-tab {
  // 重写 Ant Design 组件样式以适应深色主题
  :deep(.ant-card) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(10px);

    .ant-card-head {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: $text-primary;
        font-weight: 600;
      }
    }

    .ant-card-body {
      background: transparent;
      color: $text-primary;
    }
  }

  // 表单组件样式
  :deep(.ant-form) {
    .ant-form-item-label > label {
      color: $text-primary;
    }

    .ant-input,
    .ant-input-number,
    .ant-select-selector,
    .ant-textarea {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: $text-primary;

      &:hover {
        border-color: $primary-color;
      }

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
      }
    }

    .ant-radio-wrapper {
      color: $text-primary;

      .ant-radio-checked .ant-radio-inner {
        border-color: $primary-color;
        background-color: $primary-color;
      }
    }

    .ant-btn {
      &.ant-btn-primary {
        background: $primary-color;
        border-color: $primary-color;

        &:hover {
          background: $primary-color-light;
          border-color: $primary-color-light;
        }
      }

      &:not(.ant-btn-primary) {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: $text-primary;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          border-color: $primary-color;
          color: $primary-color;
        }
      }
    }
  }

  // Descriptions 组件样式
  :deep(.ant-descriptions) {
    .ant-descriptions-header {
      .ant-descriptions-title {
        color: $text-primary;
      }
    }

    .ant-descriptions-item-label {
      background: rgba(255, 255, 255, 0.05);
      color: $text-secondary;
    }

    .ant-descriptions-item-content {
      background: rgba(255, 255, 255, 0.02);
      color: $text-primary;
    }

    &.ant-descriptions-bordered {
      .ant-descriptions-item-label,
      .ant-descriptions-item-content {
        border-color: rgba(255, 255, 255, 0.15);
      }
    }
  }

  .avatar-section {
    margin-bottom: 24px;

    .avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;

      .avatar-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  .info-section {
    margin-bottom: 24px;
  }

  .family-section {
    .family-tree-container {
      margin-top: 24px;

      h4 {
        margin-bottom: 16px;
        color: #d4990a;
        font-weight: 500;
        text-shadow: 0 0 10px rgba(212, 153, 10, 0.3);
      }

      .family-tree {
        border: 1px solid rgba(212, 153, 10, 0.3);
        border-radius: 16px;
        padding: 24px;
        background: linear-gradient(135deg, rgba(212, 153, 10, 0.1), rgba(255, 193, 7, 0.05));
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 25px rgba(212, 153, 10, 0.15);

        .generation {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 24px;
          margin: 16px 0;
          padding: 16px;

          &.parents {
            border-bottom: 2px solid rgba(212, 153, 10, 0.3);
            padding-bottom: 24px;
          }

          &.self {
            background: linear-gradient(135deg, rgba(212, 153, 10, 0.25), rgba(255, 193, 7, 0.15));
            border-radius: 12px;
            margin: 32px 0;
            border: 1px solid rgba(212, 153, 10, 0.4);
            box-shadow: 0 4px 20px rgba(212, 153, 10, 0.2);
          }

          &.children {
            border-top: 2px solid rgba(212, 153, 10, 0.3);
            padding-top: 24px;
          }

          .family-member {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(212, 153, 10, 0.15), rgba(255, 193, 7, 0.08));
            backdrop-filter: blur(8px);
            border: 1px solid rgba(212, 153, 10, 0.25);
            box-shadow: 0 6px 16px rgba(212, 153, 10, 0.12);
            min-width: 120px;
            transition: all 0.3s ease;
            position: relative;

            &:hover {
              background: linear-gradient(135deg, rgba(212, 153, 10, 0.25), rgba(255, 193, 7, 0.15));
              border-color: #d4990a;
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(212, 153, 10, 0.2);
            }

            &.self {
              color: white;
              border-color: #d4990a;
              box-shadow: 0 8px 25px rgba(212, 153, 10, 0.3);

              .name {
                font-weight: 600;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
              }
            }

            &.spouse {
              border-color: #ffc107;
            }

            &.parent {
              border-color: #ffc107;
            }

            &.child {
              border-color: #ffd700;
            }

            span {
              font-size: 13px;
              text-align: center;
              color: #ffffff;
              font-weight: 500;
              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            :deep(.ant-tag) {
              background: rgba(0, 0, 0, 0.8) !important;
              color: #ffffff !important;
              border: 1px solid rgba(255, 255, 255, 0.3) !important;
              font-weight: 500 !important;
              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
              margin-top: 4px;

              &.ant-tag-green {
                background: rgba(52, 196, 26, 0.9) !important;
                border-color: #52c41a !important;
              }

              &.ant-tag-red {
                background: rgba(255, 77, 79, 0.9) !important;
                border-color: #ff4d4f !important;
              }

              &.ant-tag-blue {
                background: rgba(24, 144, 255, 0.9) !important;
                border-color: #1890ff !important;
              }

              &.ant-tag-gray {
                background: rgba(140, 140, 140, 0.9) !important;
                border-color: #8c8c8c !important;
              }
            }
          }
        }
      }
    }

    .family-tree .generation .family-member::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(45deg, #d4990a, transparent, #ffc107, transparent);
      border-radius: 12px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .family-tree .generation .family-member:hover::before {
      opacity: 0.3;
    }
  }
}

// 响应式样式
@media (max-width: 768px) {
  .basic-info-tab {
    .family-tree {
      .generation {
        flex-direction: column;
        gap: 8px !important;

        .family-member {
          min-width: 80px;
        }
      }
    }
  }
}
</style>
